<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-button (click)="goBack()">
        <ion-icon name="arrow-back" slot="icon-only"></ion-icon>
      </ion-button>
    </ion-buttons>

    <ion-title>商品详情</ion-title>
    <ion-buttons slot="end">
      <ion-button routerLink="/cart">
        <ion-icon name="cart"></ion-icon>
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content>
  <!-- ion-item商品型号 -->
  <ion-item>
    <ion-label>商品型号：{{product.lname}}</ion-label>
  </ion-item>
  <!-- ion-slides商品轮播图片 -->
  <ion-slides pager="true">
    <ion-slide *ngFor="let p of product.picList">
      <img [src]="p.md | serverUrl" alt="">
    </ion-slide>
  </ion-slides>
  <!-- ion-card详情卡片 -->
  <ion-card>
    <ion-card-header>
      <ion-card-title>{{product.title}}</ion-card-title>
      <ion-card-subtitle>{{product.subtitle}}</ion-card-subtitle>
    </ion-card-header>
    <ion-card-content>
      <ion-item>
        <ion-label color="danger">价格：{{product.price | currency:'￥'}}</ion-label>
        <ion-button color="success" slot="end">添加到购物车</ion-button>
      </ion-item>
      <ion-item>
        <ion-label>CPU:{{product.cpu}}</ion-label>
      </ion-item>
      <ion-item>
        <ion-label>硬盘:{{product.disk}}</ion-label>
      </ion-item>
      <!-- <div>
        {{product.details}}
      </div> -->
      <!-- angular中[]属性绑定可以绑定：HTML元素属性JS dom 对象属性 -->
      <!-- 这里使用的是一个代码片段 用管道方法替换里边的img路径 -->
      <div [innerHTML]="product.details | serverUrl:'replace'">

      </div>
    </ion-card-content>
  </ion-card>
</ion-content>